<template>
  <div style="min-height: 500px">
    <el-tree ref="rolepermissiontree" :data="state.treeData" node-key="id"
             show-checkbox check-strictly default-expand-all  highlight-current>
    </el-tree>
    <div class="mt_5 tac">
      <el-button type="primary" size="default" @click="saveRolePermission">确定</el-button>
    </div>
  </div>
</template>

<script setup name="rolePermission">
import request from '/@/utils/request';
import { ElMessage } from 'element-plus';
import {reactive, ref, onMounted, defineProps, defineEmits, nextTick} from "vue";

const rolepermissiontree = ref(null)
let props = defineProps({
  roleId : {type : Number, default: 0}
})
const state = reactive({
  treeData :[],
})

const loadRolePermissionTreeData = ()=>{
  request({
    url: '/sys/role/getrolepermission',
    data: {roleId:props.roleId}
  }).then( (res) => {
    state.treeData = res.data.permissionAllNode
    nextTick(()=>{
      rolepermissiontree.value.setCheckedKeys(res.data.checkedIds)
    })
  })
}
const saveRolePermission = ()=>{
  let rolePermissions = rolepermissiontree.value.getCheckedKeys();
  request({
    url: '/sys/role/saverolepermission',
    data: {roleId : props.roleId, rolePermissions:rolePermissions}
  }).then(res=>{
    if(res.code === '200'){
      ElMessage.success(res.msg)
    }
  })
}

onMounted(()=>{
  loadRolePermissionTreeData();
})
</script>

<style scoped>

</style>
